import React, { useState } from 'react'
import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import './kdjl.scss'

interface OrderRecord {
  id: number
  title: string
  status: 'pending' | 'approved' | 'rejected' | 'cancelled'
  hospital: string
  time: string
  amount: number
}

function Kdjl() {
  const navigate = useNavigate()
  const [activeTab, setActiveTab] = useState('全部')
  const [selectedPatient, setSelectedPatient] = useState('王小柯')
  const [showModal, setShowModal] = useState(false)

  // 模拟订单数据
  const orderRecords: OrderRecord[] = [
    {
      id: 1,
      title: '动态心电图、血常规、新冠预防...',
      status: 'pending',
      hospital: '四川省保健院北苑',
      time: '2020-01-01 10:30:20',
      amount: 201.00
    },
    {
      id: 2,
      title: '动态心电图、血常规、新冠预防...',
      status: 'approved',
      hospital: '四川省保健院北苑',
      time: '2020-01-01 10:30:20',
      amount: 201.00
    },
    {
      id: 3,
      title: '动态心电图、血常规、新冠预防...',
      status: 'rejected',
      hospital: '四川省保健院北苑',
      time: '2020-01-01 10:30:20',
      amount: 201.00
    }
  ]

  // 根据状态过滤订单
  const getFilteredOrders = () => {
    if (activeTab === '全部') return orderRecords
    const statusMap = {
      '待审核': 'pending',
      '已审核': 'approved',
      '已取消': 'cancelled'
    }
    return orderRecords.filter(order => order.status === statusMap[activeTab as keyof typeof statusMap])
  }

  const getStatusInfo = (status: string) => {
    switch (status) {
      case 'pending':
        return { text: '待审核', className: 'status-pending' }
      case 'approved':
        return { text: '审核通过', className: 'status-approved' }
      case 'rejected':
        return { text: '审核驳回', className: 'status-rejected' }
      case 'cancelled':
        return { text: '已取消', className: 'status-cancelled' }
      default:
        return { text: '未知', className: 'status-unknown' }
    }
  }

  const getActionButton = (status: string) => {
    switch (status) {
      case 'pending':
        return <button className='action-btn cancel-btn'>取消申请</button>
      case 'approved':
        return <button className='action-btn pay-btn'>去支付</button>
      case 'rejected':
        return null
      case 'cancelled':
        return null
      default:
        return null
    }
  }

  return (
    <div className='kdjl'>
      {/* 顶部导航 */}
      <div className='kdjl-top'>
        <span><LeftOutline className='kdjl-top-left' onClick={() => navigate(-1)} /></span>
        <span className='kdjl-top-title'>开单记录</span>
      </div>

      {/* 标签页 */}
      <div className='kdjl-tabs'>
        {['全部', '待审核', '已审核', '已取消'].map(tab => (
          <div
            key={tab}
            className={`tab-item ${activeTab === tab ? 'active' : ''}`}
            onClick={() => setActiveTab(tab)}
          >
            {tab}
          </div>
        ))}
      </div>

      {/* 患者信息 */}
      <div className='patient-info'>
        <div className='patient-details'>
          <span className='patient-name'>{selectedPatient}</span>
          <span className='patient-id'>2015****10</span>
        </div>
        <div className='patient-switch' onClick={() => setShowModal(true)}>
          <div className='switch-icon'>👤</div>
          <span className='switch-text'>切换</span>
        </div>
      </div>

      {/* 订单列表 */}
      <div className='order-list'>
        {getFilteredOrders().map(order => {
          const statusInfo = getStatusInfo(order.status)
          return (
            <div key={order.id} className='order-card'>
              <div className='order-header'>
                <div className='order-title'>{order.title}</div>
                <div className={`status-tag ${statusInfo.className}`}>
                  {statusInfo.text}
                </div>
              </div>
              
              <div className='order-details'>
                <div className='detail-item'>
                  <span className='detail-label'>申请医院</span>
                  <span className='detail-value'>{order.hospital}</span>
                </div>
                <div className='detail-item'>
                  <span className='detail-label'>申请时间</span>
                  <span className='detail-value'>{order.time}</span>
                </div>
                <div className='detail-item'>
                  <span className='detail-label'>开单金额</span>
                  <span className='detail-value'>¥ {order.amount.toFixed(2)}</span>
                </div>
              </div>

              {getActionButton(order.status) && (
                <div className='order-actions'>
                  {getActionButton(order.status)}
                </div>
              )}
            </div>
          )
        })}
      </div>

      {/* 切换患者模态框 */}
      {showModal && (
        <div className='modal-overlay' onClick={() => setShowModal(false)}>
          <div className='modal-content' onClick={(e) => e.stopPropagation()}>
            <div className='modal-header'>
              <span className='modal-title'>选择就诊人</span>
            </div>
            <div className='patient-list'>
              <div className='patient-item selected'>
                <span className='patient-name'>王小柯</span>
                <span className='patient-id'>2015****10</span>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default Kdjl